<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>测试fb-bs</title>

	<!-- 基本 -->
	<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
	<script src="vendor/jquery/jquery-1.9.1.min.js"></script>
	<script src="vendor/bootstrap/js/bootstrap.min.js"></script>

	<!-- html和json格式化插件 -->
	<script src="vendor/html_formater/htmlformat.js"></script>
	<script src="vendor/html_formater/jsformat.js"></script>

	<!-- 校验 -->
	<script src="vendor/jquery-validation/jquery.validate.js"></script>
	<script src="vendor/jquery-validation/localization/messages_zh.min.js"></script>
	<script src="vendor/jquery-validation/localization/messages_zh_fieldname.js"></script>

	<!-- 日期选择控件 -->
	<link href="vendor/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
	<script src="vendor/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
	<script src="vendor/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>

	<!-- 特殊radio和checkbox样式 -->
	<link rel="stylesheet" href="vendor/styles-radio-checkbox.css">

	<!-- 下拉复选插件 -->
	<link href="vendor/bootstrap-multiselect/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css"/>
	<script src="vendor/bootstrap-multiselect/js/bootstrap-multiselect.js"></script>

	<!-- ==================== 以下为自己的东西 ==================== -->
	<style>
		* {
			font-family: '微软雅黑'!important;
		}
		body {
			background: #eee;
		}
		.card {
			border: solid 1px #ddd;
			background: #fff;
			float: left;
			width: 80%;
			margin: 0 10% 30px 10%;
			padding: 20px;
		}
	</style>

	<!-- fb 组件 -->
	<script src="assets/form-builder-2/src/fb-bs/js/fb.baseContainer.js"></script>
	<script src="assets/form-builder-2/src/fb-bs/js/containers/form.js"></script>
	<script src="assets/form-builder-2/src/fb-bs/js/containers/form-group.js"></script>
	<script src="assets/form-builder-2/src/fb-bs/js/containers/multimedia.js"></script>

	<script src="assets/form-builder-2/src/fb-bs/js/fb.baseComponent.js"></script>
	<script src="assets/form-builder-2/src/fb-bs/js/components/textarea.js"></script>
	<script src="assets/form-builder-2/src/fb-bs/js/components/text.js"></script>
	<script src="assets/form-builder-2/src/fb-bs/js/components/select.js"></script>
	<script src="assets/form-builder-2/src/fb-bs/js/components/image.js"></script>

	<!-- fb 核心文件 -->
	<link href="assets/form-builder-2/src/fb-bs/css/form-builder-2.css" rel="stylesheet" type="text/css"/>
	<script src="assets/form-builder-2/src/fb-bs/js/fb.core.js"></script>

</head>
<body>
	<h1 style="text-indent: 20px;">测试自动表单2.0 - Bootstrap</h1>
	<hr style="border-color: #ddd;">
	<div class="card">
		<h3 style="border-left: solid 5px darkgreen; text-indent: 1em;">测试表单 - #testForm</h3>
		<hr>
		<form id="testForm"></form>
	</div>
	<!-- <div class="card">
		<h3 style="border-left: solid 5px darkgreen; text-indent: 1em;">测试表单2 - #testForm2</h3>
		<hr>
		<form id="testForm2"></form>
	</div> -->
	<script>
		$(document).ready(function() {
			$.ajax({
				url: '/data/getbyid_newFormat_2.json',
				dataType: 'JSON',
				success: function(jsonConf) {
					$('#testForm').renderForm(jsonConf);
				},
				error: function(r) {
					$('#testForm').html('Ops... Something must be wrong, check it');
				}
			});

			/*$.ajax({
				url: '/data/getbyid_newFormat_bak.json',
				dataType: 'JSON',
				success: function(jsonConf) {
					$('#testForm2').renderForm(jsonConf);
				},
				error: function(r) {
					$('#testForm2').html('Ops... Something must be wrong, check it');
				}
			});*/
		});
	</script>
</body>
</html>